<!-- // created by Xin Xiong<onlybelter@outlook.com>, https://github.com/OnlyBelter -->

<div class="card border-info mb-3">
    <div class="card-header">
      <b>File Uploader</b>
    </div>
    <div class="card-body">
      
      <form id="file-input-form" #fileInputForm>
        <!-- <h6 class="mb-2 text-muted custom-card-title">Project Name</h6> -->
        <h6>
            <label class="badge badge-pill badge-secondary">Project Name</label>
            <label style="color: #17a2b8">
                <i class="fa fa-info-circle" aria-hidden="true" id="projectName-help"></i>
            </label>
          </h6>
          <!-- {{ disablePrNaInput }} -->
          <div class="form-group">
            <!-- <label class="center-block">Project Name</label> -->
            <input type="text" id="projectName" name="projectName" class="form-control"
              required validateProjectName
              [(ngModel)]="projectName" #name="ngModel" [attr.disabled]="disablePrNaInput ? '' : null">
  
            <div *ngIf="name.invalid && (name.dirty || name.touched) && 
              name.errors.required && !projectNameInfo" class="alert alert-danger notice">
              Project name is required.
            </div>
            <div *ngIf="name.invalid && (name.dirty || name.touched)  && 
              !name.errors.required" class="alert alert-danger notice">
              Existed project name.
            </div>
          </div>

        <h6>
          <label class="badge badge-pill badge-secondary custom-card-title">Sample Information</label>
          <label style="color: #17a2b8">
              <i class="fa fa-info-circle" aria-hidden="true" id="sampleInfo-help"></i>
          </label>
        </h6>
        <div class="form-group">
          <!-- <label class="center-block">Sample Information</label> -->
          <label class="custom-file">
            <input type="file" ngFileSelect
            (uploadOutput)="onUploadOutput($event)" 
            [uploadInput]="uploadInput"
            [options]="options"
            (change)="onChange($event, 'sample_info', polarity)"
            class="custom-file-input"
            #sampleInfoInput
            accept=".csv"
            required>
            <span class="custom-file-control"></span>
          </label>
        </div>
 
        <!-- {{polarity}}
        {{polarity==='pos'}}
        {{polarity==='neg'}}
        {{polarity==='both'}} -->
        <h6>
          <label class="badge badge-pill badge-secondary custom-card-title">
            Polarity-related Data
          </label>
          <label style="color: #17a2b8">
            <i class="fa fa-info-circle" aria-hidden="true" id="polarity-help"></i>
          </label>
        </h6>
        <div class="form-check">
          <label class="form-check-label">
              <input class="form-check-input" type="radio" [(ngModel)]="polarity" 
               name="pol" value="pos" (click)="selectPolarity('pos')">
               Positive
          </label>
          <label class="form-check-label">
              <input class="form-check-input" type="radio" [(ngModel)]="polarity" 
               name="pol" value="neg" (click)="selectPolarity('neg')">
               Negative
          </label>
        </div>

        <div *ngIf="!ifHasCorrectUploadOrder" class="alert alert-danger notice">
          <b>Important:</b> When processing positive and negative data together, first choose and upload positive data, 
          then choose and upload negative data. Upload positive and negative data together will cause an error.
        </div>

        <div class="card" [hidden]="polarity===null">
          <div class="card-body">
            <div id="polarity-pos" [hidden]="!(polarity==='pos')">
              <h6><label class="card-subtitle mb-2 text-muted">Positive</label></h6>
              <div class="form-group">
                <label class="center-block">MS1 Peak Table</label>
                <label class="custom-file">
                  <input type="file" ngFileSelect
                    (uploadOutput)="onUploadOutput($event)" 
                    [uploadInput]="uploadInput"
                    [options]="options"
                    (change)="onChange($event, 'ms1_data', 'pos')"
                    class="custom-file-input"
                    #ms1PosInput
                    accept=".csv"
                    required>
                <span class="custom-file-control"></span>
                </label>
              </div>
              <div class="form-group">
                <label class="center-block">MS/MS Data</label>
                <label class="custom-file">
                  <input type="file" ngFileSelect
                    (uploadOutput)="onUploadOutput($event)" 
                    [uploadInput]="uploadInput"
                    [options]="options"
                    (change)="onChange($event, 'ms2_data', 'pos')"
                    class="custom-file-input"
                    #ms2PosInput
                    accept=".mgf, .msp"
                    multiple required>
                  <span class="custom-file-control"></span>
                </label>
              </div>
            </div>
            
            <div id="polarity-neg" [hidden]="!(polarity==='neg')">
              <h6><label class="card-subtitle mb-2 text-muted">Negative</label></h6>
              <div class="form-group">
                <label class="center-block">MS1 Peak Table</label>
                <label class="custom-file">
                  <input type="file" ngFileSelect
                    (uploadOutput)="onUploadOutput($event)" 
                    [uploadInput]="uploadInput"
                    [options]="options"
                    (change)="onChange($event, 'ms1_data', 'neg')"
                    class="custom-file-input"
                    #ms1NegInput
                    accept=".csv"
                    required>
                  <span class="custom-file-control"></span>
                </label>
              </div>
              <div class="form-group">
                <label class="center-block">MS/MS Data</label>
                <label class="custom-file">
                  <input type="file" ngFileSelect
                    (uploadOutput)="onUploadOutput($event)"
                    [uploadInput]="uploadInput"
                    [options]="options"
                    (change)="onChange($event, 'ms2_data', 'neg')"
                    class="custom-file-input"
                    #ms2NegInput
                    accept=".mgf, .msp"
                    multiple required>
                  <span class="custom-file-control"></span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <div [hidden]="polarity!==null"  class="alert alert-info" role="alert">
          Please select polarity mode of your data.
        </div>



      </form>


      <!-- TODO: need more condition check before upload all -->
      <!-- {{fileTypeCount.ms1===0}} -->
      <!-- {{polarity}} -->
      <div class="alert alert-danger" role="alert" *ngIf="hintUploadInfo">
        {{ hintUploadInfo }}
      </div>
      <button type="button"
        class="btn btn-info" 
        [disabled]="!name.valid || fileType2Id['ms1_data']?.length===0 || 
          fileType2Id['ms2_data']?.length===0 || fileType2Id['sample_info']?.length===0 ||
          totalSize/1024/1024 > maxSize"
        (click)="startUpload()"
        data-toggle="tooltip" data-placement="bottom" 
        title="You need to choose files (at least one file for each type) and fill in a project name before 'Upload'">
        Upload
      </button>
      <button type="button" class="btn btn-warning" (click)="removeAllFiles()">
          Reset
      </button>

    </div>
  </div>